<template>
  <div class="listitems">
    <div
      class="listitems_main"
      v-for="(item, index) in items"
      :key="'listItems_' + index"
    >
      <h1 class="listitems_main_title" v-if="item.title">
        <span>{{ item.title }}</span>
        <span v-if="item.subTitle">{{ item.subTitle }}</span>
      </h1>
      <div
        class="listitems_main_items"
        v-for="(aitem, aindex) in item.item"
        :key="'listItems_' + aindex"
      >
        <div
          class="listitems_main_items_item"
          v-for="(sitem, sindex) in aitem.menu"
          :key="'listItemsItem_' + sindex"
        >
          <a
            href="javascript:;"
            @click="itemClickHandle(sitem, sindex)"
            v-if="sitem.type === 1"
            >{{ sitem.name }}</a
          >
          <router-link
            :to="sitem.params"
            @click="itemClickHandle(sitem, sindex)"
            v-if="sitem.type === 2"
            >{{ sitem.name }}</router-link
          >
          <a
            href="javascript:;"
            @click="itemClickHandle(sitem, sindex)"
            v-if="sitem.type === 3"
            ><span>{{ sitem.name }}</span
            ><span>{{ sitem.value || "" }}</span></a
          >
          <i class="icon-arrow-right"></i>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "ListItems",
  props: {
    items: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {};
  },
  methods: {
    itemClickHandle(item, index) {
      this.$emit("itemClickHandle", item, index);
    },
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.listitems_main {
  background-color: #efefef;
  padding: 10 / @base 0;
  h1 {
    &.listitems_main_title {
      text-align: left;
      font-size: 16 / @base;
      font-weight: 400;
      margin: 10 / @base 20 / @base;
      color: #666;
      display: flex;
      span {
        width: 50%;
        overflow: hidden;
        &:last-child {
          text-align: right;
          width: 50%;
          font-size: 12 / @base;
          line-height: 18 / @base;
          color: #999;
          overflow: hidden;
        }
      }
    }
  }
  .listitems_main_items {
    margin: 0 10 / @base 10 / @base 10 / @base;
    border-radius: 5 / @base;
    background-color: #fff;
    padding: 0 / @base 0;
    .listitems_main_items_item {
      margin: 0 20 / @base;
      padding: 15 / @base 10 / @base;
      text-align: left;
      border-bottom: 1 / @base solid #efefef;
      display: flex;
      a {
        width: 99%;
        display: flex;
        span {
          width: 50%;
          &:last-child {
            text-align: right;
          }
        }
      }
      i {
        width: 1%;
        vertical-align: middle;
      }
      &:last-child {
        border: 0;
      }
    }
  }
}
</style>
